<script>
import {getUser} from "../../utils/utils";

export default {
  name: "Vaccination",
  data(){
    return{
      babyIds:[],
      pageSize:3,
      pageInfo:{},
      babyId:0,
      babies:[],
      user:{},
      form:{
        babyId:'',
        vaccineType:'',
        remark:'',
        vaccinationDate:'',
      },
      dialogFormVisible:false,
    }
  },
  methods:{
    handleClose(){
      this.dialogFormVisible=false
      this.form.babyId=''
      this.form.vaccineType=''
      this.form.vaccinationDate=''
      this.form.remark=''
    },
    addInfo(){
      this.dialogFormVisible=true
    },
    addVacInfo(){
      if (this.form.babyId===''){
        this.$message.warning("请选择宝宝")
        return
      }
      if(this.form.vaccineType===''){
        this.$message.warning("请输入疫苗名称")
        return;
      }
      if (this.form.vaccinationDate===''){
        this.$message.warning("请选择接种时间")
        return;
      }
      const fd=new FormData
      Object.keys(this.form).forEach(key=>{
        fd.append(key, this.form[key])
      })
      this.$axios.post('/babyVaccine/add',fd).then(resp=>{
        if (resp.data){
          alert('添加成功')
          this.getBabyVac()
          this.handleClose()
        }else {
          alert('添加失败')
        }
      })
    },
    delBabVac(row){
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delete(row.id)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    delete(id){
      this.$axios.post('/babyVaccine/del?id='+id).then(resp=>{
        if (resp.data){
          alert('删除成功')
          this.getPic()
          this.getBabyVac()
        }else {
          alert('删除失败')
        }
      })
    },
    changeBaby(babyId){
      if(babyId!==0){
        this.form.babyId=babyId
      }
      this.babyId=babyId
      if(babyId===0){
        this.$axios.get("/babyVaccine/list?babyIds="+this.babyIds+"&curPage=1&pageSize="+this.pageSize).then(resp=>{
          this.pageInfo=resp.data
        })
      }else{
        this.$axios.get("/babyVaccine/list?babyIds="+babyId+"&curPage=1&pageSize="+this.pageSize).then(resp=>{
          this.pageInfo=resp.data
        })
      }
    },
    getBabyVac(){
      this.$axios.get("/babyVaccine/list?babyIds="+this.babyIds).then(resp=>{
        this.pageInfo=resp.data
      })
    },
    paging(curPage){
      if(this.babyId===0){
        this.$axios.get("/babyVaccine/list?babyIds="+this.babyIds+"&curPage="+curPage+"&pageSize="+this.pageSize).then(resp=>{
          this.pageInfo=resp.data
        })
      }else {
        this.$axios.get("/babyVaccine/list?babyIds="+this.babyId+"&curPage="+curPage+"&pageSize="+this.pageSize).then(resp=>{
          this.pageInfo=resp.data
        })
      }
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.paging(1)
    },
    getPic(){
      this.$axios.get('babyPic/getBabies?userId=' + this.user.id).then(resp=>{
        this.babies=resp.data
        this.babyIds=[]
        this.babies.forEach(baby=>{
          this.babyIds.push(baby.id)
        })
        this.getBabyVac()
      })
    }
  },
  created() {
    this.user=getUser()
    this.getPic()
  }
}
</script>

<template>
<div>
  <el-button type="primary" @click="addInfo">添加接种记录</el-button>
  <el-table
    :data="pageInfo.list"
    style="width: 100%">
    <el-table-column
      prop="id"
      label="序号"
      width="180">
    </el-table-column>
    <el-table-column
      prop="baby.name"
      label="宝宝姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="baby.petName"
      label="宝宝小名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="vaccineType"
      label="疫苗类型"
      width="180">
    </el-table-column>
    <el-table-column
      prop="vaccinationDate"
      label="接种日期">
    </el-table-column>
    <el-table-column
      prop="remark"
      label="备注">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      label="操作">
      <template slot-scope="scope">
        {{ scope.row.status }}
        <el-button type="danger" @click="delBabVac(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="paging"
    :current-page="pageInfo.pageNum"
    :page-sizes="[3,6,9,12]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="pageInfo.total">
  </el-pagination>
  <!--添加-->
  <el-dialog title="添加宝宝接种记录："
             :visible.sync="dialogFormVisible"
             :before-close="handleClose"
  >
    <el-form :model="form">
      <el-form-item label="选择宝宝：">
        <el-select v-model="form.babyId" placeholder="请选择宝宝"  style="width: 300px">
          <el-option
            v-for="baby in babies"
            :key="baby.id"
            :label="baby.name"
            :value="baby.id">
            <span style="float: left">{{ baby.name }}</span>
            <span style="float: right; color: #8492a6; font-size: 13px">{{ baby.petName }}</span>
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="疫苗名称：" >
        <el-input v-model="form.vaccineType" style="width: 300px" auto-complete="off"></el-input>
      </el-form-item>
      <el-form-item label="接种日期：">
        <el-col :span="11" style="width: 300px" >
          <el-date-picker format="yyyy-MM-dd" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="form.vaccinationDate" style="width: 100%;"></el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="备注：" >
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <el-input v-model="form.remark" style="width: 300px" auto-complete="off"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="addVacInfo">确 定</el-button>
    </div>
  </el-dialog>
</div>
</template>

<style scoped>

</style>
